<template>
    <div>
        <el-drawer title="" :visible.sync="drawer" :direction="direction" :before-close="handleClose" custom-class="drawer-info">
            <div class="info-item">
                <h5 class="from-title">基本信息</h5>
                <div class="form-item">
                    <label class="form-item-label">中文简称:</label>
                    <div class="form-item-content">{{ objInfo.countryNameCn }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">英文简称:</label>
                    <div class="form-item-content">{{ objInfo.countryNameEn }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">英文全称:</label>
                    <div class="form-item-content">{{ objInfo.countryNameEnFull }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">国旗图片:</label>
                    <div class="form-item-content" ><img v-if="objInfo.nationalFlag" :src="objInfo.nationalFlag" style="width: 100px; height: 100px" /></div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">两字母代码:</label>
                    <div class="form-item-content">{{ objInfo.alphaCode2 }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">三字母代码:</label>
                    <div class="form-item-content">{{ objInfo.alphaCode3 }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">数字代码:</label>
                    <div class="form-item-content">{{ objInfo.countryCode }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">区号:</label>
                    <div class="form-item-content">{{ objInfo.areaCode }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">备注:</label>
                    <div class="form-item-content">{{ objInfo.remark }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">中文拼音:</label>
                    <div class="form-item-content">{{ objInfo.chinesePinyin }}
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    import { syscountryInfo } from "@/api/system/syscountry.js";
    
    export default {
        data() {
            return {
                drawer: true,
                direction: "rtl",
                objInfo: {},
            }
        },
        created() {
        },
        methods: {
            init(id) {
                if (id) {
                   syscountryInfo(id).then(res => {
                        this.objInfo = res.data
                   })

                }
                this.drawer = true
            },
            // 关闭抽屉
            handleClose(done) {
                done()
            },
        },
    }
</script>
<style scoped>
    .from-title {
        margin-bottom: 20px;
        padding: 0 20px 20px 20px;
        font-size: 16px;
        color: #17233d;
        border-bottom: 1px solid #eee;
    }
    .info-item {
        margin-bottom: 40px;
    }

    .form-item {
        margin-bottom: 20px;
        font-size: 14px;
    }
    .form-item-label {
        text-align: right;
        float: left;
        width: 25%;
    }
    .form-item-content {
        margin-left: 30%;
        width: 70%;
    }
</style>
